<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta th:charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>K3Cloud | 委托代销报表</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../static/build/css/app.min.css" th:href="${#fn.getStaticFile('/build/css/app.min.css')}">
    <link rel="stylesheet" href="../../static/dist/css/common.css" th:href="${#fn.getStaticFile('/dist/css/common.css')}">
    <link href="../../static/lib/plugins/handsontable/handsontable.full.min.css" th:href="@{/lib/plugins/handsontable/handsontable.full.min.css}" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../static/lib/plugins/bootstrap-daterangepicker/daterangepicker.css"  th:href="@{/lib/plugins/bootstrap-daterangepicker/daterangepicker.css}" type="text/css" media="all"/>
    <script src="../../static/build/js/app.min.js" th:src="${#fn.getStaticFile('/build/js/app.min.js')}"></script>
    <script src="../../static/lib/plugins/bootstrap-daterangepicker/moment.js" th:src="${#fn.getStaticFile('/lib/plugins/bootstrap-daterangepicker/moment.js')}" type="text/javascript"></script>
    <script src="../../static/lib/plugins/bootstrap-daterangepicker/daterangepicker.js"  th:src="${#fn.getStaticFile('/lib/plugins/bootstrap-daterangepicker/daterangepicker.js')}" type="text/javascript"></script>
    <script src="../../static/lib/plugins/handsontable/handsontable.full.min.js" th:src="${#fn.getStaticFile('/lib/plugins/handsontable/handsontable.full.min.js')}"></script>
    <script src="../../static/dist/js/common.js" th:src="${#fn.getStaticFile('/dist/js/common.js')}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            var data = [[${consignmentReport}]];
            var header = [[${heads}]];
            if(data.length > 0){
                var ht = new Handsontable(document.getElementById('grid'), {
                    data: data,
                    height: 650,
                    rowHeaders: true,
                    colHeaders: header,
                    fixedColumnsLeft: 2,
                    columns: [
                        {data:'customerCode', type: 'text'},
                        {data:'customerName', type: 'text'},
                        {data:'goodsCode', type: 'text'},
                        {data:'goodsName', type: 'text'},
                        {data:'consignmentInitialQuantity', type: 'numeric'},
                        {data:'consignmentInitialPrice', type: 'numeric',format:"0,0.00"},
                        {data:'consignmentInitialAmount', type: 'numeric',format:"0,0.00"},
                        {data:'consignmentSendQuantity', type: 'numeric'},
                        {data:'consignmentSendPrice', type: 'numeric',format:"0,0.00"},
                        {data:'consignmentSendAmount', type: 'numeric',format:"0,0.00"},
                        {data:'consignmentSettlementQuantity', type: 'numeric'},
                        {data:'consignmentSettlementPrice', type: 'numeric',format:"0,0.00"},
                        {data:'consignmentSettlementAmount', type: 'numeric',format:"0,0.00"},
                        {data:'consignmentNotSettledQuantity', type: 'numeric'},
                        {data:'consignmentNotSettledPrice', type: 'numeric',format:"0,0.00"},
                        {data:'consignmentNotSettledAmount', type: 'numeric',format:"0,0.00"}
                    ],
                    filters: true,
                    dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
                    stretchH: 'all',
                    contextMenu: true
                });
            }
            var dateRange = $("#dateRange").val();
            var companyName = $("#companyName").val();
            $(".btn-export").click(function(){
                if(confirm("确认导出数据?")){
                    window.location.href = ctx + "cloud/consignmentReport/export?dateRange="+dateRange+"&companyName="+companyName;
                }
            });
        });
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini " th:classappend="${#session.getAttribute('sidebarClass')}" th:with="pageCode='consignmentReport'">
    <div Class="wrapper">
        <div th:replace="fragment/layout :: header"></div>
        <!-- Left side column. contains the logo and sidebar -->
        <div th:replace="fragment/layout :: menu(activePageCode=${pageCode})"></div>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Main content -->
            <section class="content">
                <!-- Nav tabs -->
                <ul th:replace="fragment/menuTab :: menuTab(activePageCode=${pageCode})"></ul>
                <div class="panel panel-info">
                    <div class="panel-body">
                        <form class="form-inline pull-left" role="form" th:action="@{/cloud/consignmentReport/list}" method="get">
                            <div class="form-group">
                                <label for="dateRange">日期</label>
                                <input type="text" id="dateRange" name="dateRange"  class="form-control dateRange"  th:value="${dateRange}" readonly="readonly"  style="width:200px;" />
                            </div>
                            <div class="form-group">
                                <label for="companyName">账套</label>
                                <select name="companyName" id="companyName" class="form-control" style="width:180px;">
                                    <option th:value="null" th:text="请选择账套"></option>
                                    <option th:each="item : ${futureClouds}" th:value="${item}" th:text="${item}" th:selected="${companyName==item}">cloud</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-success">
                                <span class="glyphicon glyphicon-search"></span>搜索
                            </button>
                        </form>
                        <button class="btn btn-export pull-right btn-info">
                            <span class="glyphicon glyphicon-cloud-download"></span>导出
                        </button>
                    </div>
                    <div class="panel-body">
                        <div id="grid" style="margin-top:10px;"></div>
                    </div>
                </div>
            </section>
        </div>
        <footer th:replace="fragment/layout :: footer"></footer>
    </div>
</body>
</html>